<!-- 主井装卸 -->
<template>
  <div class="main">
    <div class="model">
      <img src="../assets/images/mainunload.png">
      <img v-if="top === 1" class="belt" src="../assets/images/unloadA.gif">
      <img v-if="left === 1" class="coall" src="../assets/images/unloadB.gif">
      <img v-if="right === 1" class="coalr" src="../assets/images/unloadC.gif">
    </div>
    <div class="table">
      <main-table :tableList="tableList"></main-table>
    </div>
  </div>
</template>

<script>
  import MainTable from '@/components/MainTable'
  // 接口默认后端传百分比
  import {
    vshaftList
  } from '../server/api.js'
  export default {
    data() {
      return {
        data: [],
        timer: null,
        top: 1,
        left: 1,
        right: 1,
        tableList: []
      }
    },
    created() {
      this.init()
    },
    mounted() {
      const timer = setInterval(() => {
        this.init()
      }, 5000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer))
    },
    methods: {
      async init() {
        const res = await vshaftList();
        this.tableList = res.data.data
      }
    },
    components: {
      MainTable
    }
  }

</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    height: calc(100vh - 120px);
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    .belt {
      position: absolute;
      top: 284px;
      left: 324px;
    }

    .coalr {
      position: absolute;
      top: 525px;
      left: 464px;
    }

    .coall {
      position: absolute;
      top: 525px;
      left: 204px;
    }
    .table {
      align-self: center;
      align-content: center;
    }
  }

</style>
